<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link rel="stylesheet" href="../../css/mui.plus.css" />
	<style>
		.pat-price {
			position: relative;
			top: 3px;
			color: #30B497;
		}
		.pat-sale {
			color: #aaa;
			font-size: 10px;
			font-weight: 200;
		}
		.panel-price {
			padding: 20px;
		}
		.np-img~.np-img {
			margin-top: -5px;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">产品详情</h1>
	</header>
	
	<div class="mui-content" id="product-detail">
		<div id="slider" class="mui-slider" >
			<div class="mui-slider-group">
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a id="btn-manual" href="#">
						<img src="../../images/banner/manual.png">
					</a>
				</div>
				<div class="mui-slider-item">
					<a href="#">
						<img src="../../images/banner/web.png">
					</a>
				</div>
				<div class="mui-slider-item">
					<a href="#">
						<img src="../../images/banner/1.png">
					</a>
				</div>
				<div class="mui-slider-item">
					<a href="#">
						<img src="../../images/banner/3.png">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
		
		<div class="panel-price">
			两片式护颈托
			<div class="pat-price">
				<span id="price-panel">欢迎选购</span>
				<span class="pat-sale mui-pull-right">本月销量:123</span>
			</div>
		</div>
		
		<div class="oe-divide-block"></div>
		
		<ul class="mui-table-view">
	        <li class="mui-table-view-cell">
	            <a class="mui-navigate-right">
					商家已认证
	            </a>
	        </li>
	    </ul>
		
		<div class="oe-divide-block"></div>
		
		<div class="panel-img">
			<div class="oe-emp">
				<img src="../../images/blank_page/empty-follow@2x.png"/>
			</div>
		</div>
	</div>
	
	<script id="tmp-product" type="text/html">
		{{if data}}
			<div id="slider" class="mui-slider" >
				<div class="mui-slider-group">
					{{each data.goods_carousel_imgs as v i}}
						<div class="mui-slider-item">
							<a id="btn-manual" href="#">
								<img src="{{v}}">
							</a>
						</div>
					{{/each}}
				</div>
				<div class="mui-slider-indicator">
					{{each data.goods_carousel_imgs as v i}}
						<div class="mui-indicator {{i === 0 ? 'mui-active' : ''}}"></div>
					{{/each}}
				</div>
			</div>
			
			<div class="panel-price">
				{{data.goods_name}}
				<div class="pat-price">
					<span id="price-panel">欢迎选购</span>
					<span class="pat-sale mui-pull-right">本月销量:{{data.goods_sales_volume}}</span>
				</div>
			</div>
			
			<div class="oe-divide-block"></div>
			
			<ul class="mui-table-view">
		        <li class="mui-table-view-cell" data-page = "merchant-detail.html" data-sell_id = "{{data.goods_sell_id}}">
		            <a class="mui-navigate-right">
						商家已认证
		            </a>
		        </li>
		    </ul>
			
			<div class="oe-divide-block"></div>
			
			<div class="panel-img">
				{{each data.goods_detail_imgs as v i}}
					<img src="{{v}}" alt="" class="np-img" />
				{{/each}}
			</div>
		{{/if}}
	</script>
	
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
    <script src="../../js/lib/template.js"></script>
	<script>
		;(function($, a){
				var wv,
					html,
					price,
					goods_id,
					tmpData,
					productDetail = document.getElementById("product-detail"),
					pricePanel = document.getElementById("price-panel");
				
				$.plusReady(function(){
					wv = plus.webview.currentWebview();
					goods_id = wv.goods_id;
					
					a.net.get('c_sp_goods/show', {goods_id: goods_id}, function(data){
						if(data && data.code === '100'){
							tmpData = data;
							price = data.data.goods_shop_price;
							html = template('tmp-product', tmpData);
							productDetail.innerHTML = html;
							var gallery = mui('.mui-slider');
							gallery.slider({
							  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
							});
						}
					});
				})
				
				$('.mui-content').on('tap', 'li', function(){
					$.openWindow({
						url: this.dataset.page,
						waiting: {
							autoShow: false
						},
						extras: {
							sell_id: this.dataset.sell_id
						}
					});
				});
				
				$('.mui-content').on('tap', '#price-panel', function(){
					if(this.innerHTML === '欢迎选购'){
						this.innerHTML = price ? '￥' + price : '￥998';
					}else {
						this.innerHTML = '欢迎选购';
					}
				});
				
		}(mui, app));
	</script>
</body>
</html>